<template>
    <div class="mt-2">

        <el-button @click="drawer = true" type="primary">
            管理
        </el-button>

        <el-drawer
            title="直播间管理"
            :visible.sync="drawer"
            :direction="direction"
            size="70%"
            :before-close="handleClose">
            <div class="ml-5">
                <div class="mt-2 mb-2">
                    <el-switch
                        v-model="model"
                        active-text="踢人"
                        inactive-text="禁言">
                    </el-switch>
                    <button @click.prevent="fresh" class="btn btn-info ml-2 btn-sm">刷新</button>
                    <input type="number" placeholder="设置时间" v-model="timeNum">分钟
                    <!--                    <input type="text" placeholder="处置消息提示" v-model="message">-->
                    <!--                    <input type="text" placeholder="移除消息提示" v-model="removeMessage">-->

                </div>
                <div class="d-flex justify-content-center">
                    <el-transfer
                        filterable
                        :filter-method="filterMethod"
                        filter-placeholder="请输入昵称或id号"
                        v-model="value"
                        :data="data"
                        :titles="headTitle"
                    >

                    </el-transfer>
                </div>

            </div>
            <button class="btn btn-info btn-sm ml-5" @click.prevent="submit()">提交</button>

        </el-drawer>

    </div>

</template>

<script>
    export default {
        props: {
            kickoutAction: {requred: true},
            speekAction: {requred: true},
            dataAction: {requred: true},
            live_id: {requred: true},
            listname: {type: Array, default: () => [['未禁言', '已禁言'], ['未踢出', '已踢出']]}
        },
        data() {
            return {
                //抽屉开始
                drawer: false,
                direction: 'ltr',
                //抽屉结束
                //穿梭框开始
                data: [{label: 1, key: 2}],
                //@value 右侧并且提交后台的数据
                value: [],
                message: '',
                removeMessage: '',
                timeNum: 5,
                filterMethod(query, item) {
                    return item.label.indexOf(query) > -1;
                },

                //穿梭框结束
                //滑动按钮
                model: false,
                //滑动按钮结束
            }

        },

        computed: {
            headTitle: function () {

                return this.model ? this.listname[1] : this.listname[0]
            }
        },
        watch: {
            model(val) {
                this.fresh();
            },
            drawer(val) {
               if(val){
                   this.fresh();
               }
            }

        }
        ,
        methods: {
            handleClose(done) {
                this.$confirm('确认关闭？')
                    .then(_ => {
                        done();
                    })
                    .catch(_ => {
                    });
            },
            async fresh() {
                //@model false为禁言, true为踢人
                let res = await this.axios.post(this.dataAction, {'live': this.live_id, 'model': this.model})

                //刷新所有数据
                this.data = this.formatData(res.data);
                //刷新选定数据
                this.value = res.rightData;
            },
            async submit() {
                let removeIds = [];

                for (const item of this.data) {
                    if (!this.value.includes(item.key)) {
                        removeIds.push(item.key)
                    }
                }

                if (!this.model) {
                    await this.axios.post(this.speekAction, {
                        uids: this.value,
                        time: this.timeNum,
                        removeId: removeIds,
                        live_id: this.live_id,
                        // speekMessage: this.message,
                        // removeMessage: this.message
                    })
                } else {
                    await this.axios.post(this.kickoutAction, {
                        uids: this.value,
                        time: this.timeNum,
                        removeId: removeIds,
                        live_id: this.live_id,
                        // speekMessage: this.message,
                        // removeMessage: this.message
                    })

                }
                this.fresh()
            }
            ,
            formatData(data) {
                let newData = [];
                if (!this.drawer) return
                data.forEach((live, index) => {
                    newData.push({
                        label: live.name,
                        key: live.id,
                    });
                });
                return newData;


            }
        }
    }

</script>
